<template>
  <div class="balance">
    <!-- 头部 -->
    <div class=" header clearfix">
      <div class="logo">
        <a href="javascript:;" title="易创天下">
          <img src="../image/logo.png" width="200" height="60">
        </a>
      </div>
      <div class="flow-step">
        <ul class="flow-step-2">
          <li class="s1">加入购物车</li>
          <li class="s2">下订单</li>
          <li class="s3">去付款</li>
          <li class="s4">确认收货</li>
          <li class="s5">评价</li>
        </ul>
      </div>
    </div>
    <!-- 内容 -->
    <div class="wrapper">
      <!-- 收货人信息 -->
      <div class="container consignee">
        <div class="container-hd">
          <el-row :gutter="24">
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <div class="text_left">收货地址</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple text_right">新增收货地址</div>
            </el-col>
          </el-row>
        </div>
        <div class="address-list" v-if="address.length>0" key="keyHaveAdd">
          <ul>
            <li class="current">
              <el-row>
                <el-col :span="4">
                  <div class="grid-content bg-purple-dark">
                    <el-radio v-model="radio" label="1">默认</el-radio>
                  </div>
                </el-col>
                <el-col :span="15">
                  <div class="grid-content bg-purple-dark" style="text-align: left;">
                    {{address&&address[0]&&address[0].user_address_province}}
                    {{address&&address[0]&&address[0].user_address_city}}{{address&&address[0]&&address[0].user_address_area}}
                    /{{address&&address[0]&&address[0].user_address_name}}
                    {{address&&address[0]&&address[0].user_address_tel}}</div>
                </el-col>
                <el-col :span="5">
                  <div class="grid-content bg-purple-dark bianqi">
                    <div>编辑</div>
                    <div>删除</div>
                  </div>
                </el-col>
              </el-row>
            </li>
          </ul>
        </div>
        <div class="address-list" v-else key="keyNoAdd">
          <div class="infor-editor editBox ">
            <ul class="adder">
              <li>
                <label><em class="xh">*</em>收货人：</label>
                <div class="recinp"><input type="text" maxlength="10" v-model="user_address_name"></div>
              </li>
              <li>
                <label><em class="xh">*</em>所在地区：</label>
                <div class="recinpup">
                  <div class="pentrs oneArea" @click="one()">{{oneName}}
                    <div class="dinw" v-show="oneShow">
                      <ul>
                        <li v-for="(item, index) in oneArea" :key="index" class="fih" @click="handleOneArea(item)">
                          {{item.name}}</li>
                      </ul>
                    </div>
                  </div>
                  <div class="pentrs" @click="two()">{{twoName}}
                    <div class="dinw" v-show="twoShow">
                      <ul>
                        <li v-for="city in twoArea" :key="city.id" class="fih" @click="handleTwoArea(city)">
                          {{city.name}}</li>
                      </ul>
                    </div>
                  </div>
                  <div class="pentrs" @click="tree()">{{treeName}}
                    <div class="dinw" v-show="treeShow">
                      <ul>
                        <li v-for="county in threeArea" :key="county.id" class="fih" @click="handletreeArea(county)">
                          {{county.name}}</li>
                      </ul>
                    </div>
                  </div>
                  <div class="pentrs" @click="four()" v-show="fourShow">{{fourName}}
                    <div class="dinw" v-show="fourShow">
                      <ul>
                        <li v-for="town in fourArea" :key="town.id" class="fih" @click="handleFourArea(town)">
                          {{town.name}}</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </li>
              <li>
                <label><em class="xh">*</em>详细地址：</label>
                <div class="recinp detailed"><input type="text" maxlength="10" v-model="user_address"></div>
              </li>
              <li>
                <label><em class="xh">*</em>手机号码：</label>
                <div class="recinp"><input type="text" maxlength="11" v-model="user_address_tel"></div>
              </li>
            </ul>
            <label class="setup-default">
              <input name="deliverDefault" id="deliverDefault" type="checkbox" class="checkbox" v-model="checked">设置为默认地址
            </label>
            <input addressid="0" id="deliverBotton" type="button" class="savebtn w120-btn" value="新增收货地址" @click="preservation()">
          </div>
        </div>
      </div>
  
      <!-- 支付方式 -->
      <div class="container">
        <div class="container-hd">
          <div class="title">支付方式</div>
        </div>
        <ul class="method-payment clearfix">
          <li class="current" value="2" style="cursor:pointer;">网上支付 <i class="ico"></i>
          </li>
        </ul>
      </div>
      <!-- 购物车商品信息 -->
      <div class="container">
        <div class="container-hd">
          <div class="title">确认订单信息</div>
        </div>
        <div class="goods-list">
          <table>
            <tbody>
              <tr>
                <th class="cell-1">
                </th>
                <th class="cell-2">单价（元）</th>
                <th class="cell-3">数量</th>
                <th class="cell-4"></th>
                <th class="cell-5">小计（元）</th>
              </tr>
              <tr>
                <td class="cell-1">
                  <div class="goods-infor">
                    <a href="javascripr:;" target="_blank" class="pic">
                      <span>
                        <img width="60" height="60" :src="imgUrl.img+data.goods_pic" alt=""></span></a>
                    <span class="title">
                      <a href="javascripr:;" target="_blank">{{data.goods_short_title}}</a>
                    </span>
                    <div class="color-suits">
                      <dl class="color">
                        <dt class="label">规格：</dt>
                        <dd>{{data.stock_name}}</dd>
                      </dl>
                    </div>
                  </div>
                </td>
                <td class="cell-2">
                  ¥{{Feright.order_price}}</td>
                <td class="cell-3">{{data.shopping_number}}</td>
                <td class="cell-4"></td>
                <td class="cell-5">¥{{Feright.order_price}}</td>
              </tr>
              <tr>
                <td colspan="5">
                  <div class="order-extra">
                    <div class="message-box">
                      <span class="label">给卖家留言：</span>
                      <textarea class="text-focus" name="buyer-note-195010" id="orderNote" fn="limit" limit="200"
                        tipsid="haveFonts" style="color: rgb(153, 153, 153);" v-model="liuyan">您可以填写对商品、配送的要求...</textarea>
                    </div>
                  </div>
                  <div class="order-extra-info">
                    <dl class="clearfix">
                      <dt>券抵：</dt>
                      <dd class="preferential-goods">
                        <select>
                          <option>无</option>
                        </select>
                      </dd>
                      <dd class="price new-coupon-price">{{Feright.order_price_q}}</dd>
                    </dl>
                    <dl class="clearfix">
                      <dt>运费：</dt>
                      <dd class="preferential-goods">
                        <select>
                          <option>无</option>
                        </select>
                      </dd>
                      <dd class="price new-coupon-price">{{Feright.freight}}</dd>
                    </dl>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <!-- 提交订单 -->
      <div class="submit-order clearfix">
        <div class="total-price clearfix">
          <span class="price">实付额（含运费）：<em>￥{{detailPay}}</em></span>
          <span>商家承诺支付货款后<em>24小时</em>内发货</span>
        </div>
        <div class="clearfix">
          <input class="submit-btn" name="confirmOrder" type="button" value="提交订单" @click="handleGoPay">
        </div>
      </div>
    </div>
    <!-- 公共底部 -->    
     <Footer></Footer> 
  </div>
</template>


<script>
import Footer from '@/components/footer'
  import * as API from '@/api/index';
  import {
    mapGetters
  } from 'vuex';
  import {
    Transform
  } from 'stream';
  export default {
    name: "balance",
    data() {
      return {
        data: localStorage.getItem('dataList') ? JSON.parse(localStorage.getItem('dataList')) : [],
        radio: '1',
        address: [],
        user_address_name: '',
        user_address: '',
        user_address_tel: '',
        oneName: '选择省',
        twoName: "选择市",
        treeName: '选择县',
        fourName: '选择县',
        oneNameid: 0,
        twoNameid: 0,
        liuyan: '',
        oderid: '', // 订单ID
        treeNameid: 0,
        fourNameid: 0,
        oneShow: false,
        treeShow: false,
        twoShow: false,
        fourShow: false,
        checked: true,
        status: 0,
        siji: false,
        freight: { // 购物车运费接口对象
          freight: '',
          order_price: '',
          order_price_q: ''
        },
        oneArea: [], // 省级数组
        twoArea: [], // 市级数组
        threeArea: [], // 县级数组
        fourArea: []
      }
    },
    created() {
      this.getAddress()
      this.getOneArea(); //获取省级数据

    },
    methods: {
      // 获取地址
      async getAddress() {
        const data = {
          service: 'Pro.Order.GetAddress'
        }
        const res = await API.toIndex(data)
        if (res.ret === 200) {
          this.address = res.data
          this.shdz = res.data.user_address_id
        } else {
          this.$message.error(res.msg);
        }
      },
      // 获取省级数据
      async getOneArea() {
        const params = {
          service: 'Pro.Jd.GetProvince'
        };
        const res = await API.toIndex(params);
        if (res.ret == 200) {
          this.oneArea = res.data;
        } else {
          this.$message.error(res.msg);
        }
      },
      handleOneArea(item) {
        this.oneName = item.name
        this.gettwoArea(item.id)
        this.oneNameid = item.id
      },
      handletreeArea(item) {
        this.treeName = item.name
        this.treeNameid = item.id
        this.getTFourArea(item.id)
      },
      // 获取市级数据
      async gettwoArea(id) {
        const params = {
          service: 'Pro.Jd.GetCity',
          id

        };
        const res = await API.toIndex(params);
        if (res.ret == 200) {
          this.twoArea = res.data;
        }
      },
      //县数据
      async getThreeArea(id) {
        const params = {
          service: 'Pro.Jd.GetCounty',
          id
        };
        const res = await API.toIndex(params);
        if (res.ret == 200) {
          this.threeArea = res.data;
        }
      },
      //乡
      async getTFourArea(id) {
        const params = {
          service: 'Pro.Jd.GetTown',
          id
        };
        const res = await API.toIndex(params);
        if (res.ret == 200) {
          if (!res.data.length > 0) {
            this.fourName = '';
            this.siji = false;
            this.fourShow = false;

          } else {
            this.fourName = '请选择区';
            this.fourArea = res.data;
            this.siji = true;
          }
        }
      },
      handleFourArea(item) {
        this.fourName = item.name
        this.fourNameid = item.id
      },
      one() {
        this.oneShow = !this.oneShow
      },
      two() {
        this.twoShow = !this.twoShow
      },
      tree() {
        this.treeShow = !this.treeShow
      },
      four() {
        this.fourShow = !this.fourShow
      },
      handleTwoArea(item) {
        this.twoName = item.name;
        this.getThreeArea(item.id)
        this.twoNameid = item.id
      },


      //生成订单
      async ordersc() {
        const data = {
          service: 'Pro.Order.OrderAdd',
          address_id: this.address[0].user_address_id,
          goods_id: this.data.goods_id,
          goods_type: this.data.goods_type,
          stock_name: this.data.goods_type === 2 ? this.data.sku_id : this.data.stock_name, // 严选的时候，这里传的是sku_id，而在自营的时候，传的name
          goods_num: 1,
          order_text: this.liuyan,
          pay_type: 'yuepay'
        }
        const detailREs = await API.toIndex(data)
        if (detailREs.ret == 200) {
          this.oderid = detailREs.data.order_id // 获取订单id
        } else {
          this.$message.error(detailREs.msg);

        }
      },


      //添加地址
      async preservation() {
        if (this.checked) {
          this.status = 1
        } else {
          this.status = 0
        }
        const param = {
          service: 'Pro.Mine.AddressAdd',
          province: this.oneName,
          city: this.twoName,
          area: this.treeName,
          address: this.user_address,
          name: this.user_address_name,
          town: this.fourName,
          tel: this.user_address_tel,
          status: this.status,
          num: this.siji ? `${this.oneNameid}_${this.twoNameid}_${this.treeNameid}_${this.fourNameid}` : `${this.oneNameid}_${this.twoNameid}_${this.treeNameid}_0`
        }
        const res = await API.toIndex(param);
        if (res.ret == 200) {
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          window.reload()
        } else {
          this.$message.error(res.msg);
        }
      },
      //去付款
      async handleGoPay() {
        if (this.address.length > 0) {
         await this.ordersc()
          let len = {};
          len.shdz = this.address[0].user_address_id;
          len.shopid = this.data.goods_id;
          len.stock_name = this.data.stock_name;
          len.shopsl = 1;
          len.zffs = 'pay_type	';
          len.liuy = this.liuyan;
          len.shopname=this.data.goods_short_title;
          len.moeny = this.detailPay
          localStorage.setItem('paylist', JSON.stringify(len));
          this.$router.push({path:'/pay',query:{id:this.oderid}})
        } else {
          this.$message.error('请添加地址');
        }

      },
    },
    computed: {
      ...mapGetters(['Feright']),
      detailPay() {
        let pay = null;
        if (Object.prototype.toString.call(this.data) === '[object Array]') {
          pay = Number(this.freight.order_price) + Number(this.freight.freight);
        } else {
          pay = Number(this.Feright.order_price, 10) + Number(this.Feright.freight, 10);
        }
        if (isNaN(pay)) return false;
        return pay.toFixed(2);
      }
    },
    components: {
      Footer
    }
  }

</script>
<style scoped>
  @import '../../scss/balance.css';

</style>
